<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
</head>

<body>
    <!--准备好一个容器-->
    <div id="test"></div>
    <!--引入react核心库,核心库必须先引入-->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!--引入react-dom, 用于支持react操作DOM-->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!--引入babel,用于将jsx转为js-->
    <script type="text/javascript" src="./js/babel.min.js"></script>

    <div id="test"></div>

    <script type="text/babel">
        //    jsx语法规则：
// 		1.定义虚拟DOM时，不要写引号。
// 		2.标签中混入JS表达式时要用{}。
// 		3.样式的类名指定不要用class，要用className。
// 		4.内联样式，要用style={{key:value}}的形式去写。
// 		5.只有一个根标签
// 		6.标签必须闭合
// 		7.标签首字母
// 			(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
// 			(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。



    const name ="邓紫棋"
    const title="你好" 
    const zj="周杰伦"

    //1.创建虚拟DOM
    const RDOM =(
        <div>
        <h2 className="redOne">{name}</h2>
        <p className="pOne">{title}</p>
        <p style={{color:"yellow",fontSize: '16px',}}>{zj}</p>
        <input type="text"/>
        </div> 
     )

    //2.渲染虚拟DOM到页面
    ReactDOM.render(RDOM,document.getElementById('test'))

    </script>
    <style>
        .redOne {
            color: red
        }

        .pOne {
            background: green
        }
    </style>



</body>

</html>